<template>
  <div class="post-detail-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <a href="/home" class="breadcrumb-item">首页</a>
      <span class="breadcrumb-separator">/</span>
      <a :href="`/category/${post.category}`" class="breadcrumb-item">{{ getCategoryName(post.category) }}</a>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">帖子详情</span>
    </div>

    <!-- 主内容区域 -->
    <div class="post-detail-main">
      <!-- 帖子详情 -->
      <div class="post-detail-section">
        <div class="post-header">
          <div class="post-author-info">
            <img :src="post.avatar" alt="作者头像" class="post-author-avatar">
            <div class="author-details">
              <h3 class="post-author-name">{{ post.author }}</h3>
              <span class="post-time">{{ post.time }}</span>
            </div>
          </div>
          <div class="post-actions">
            <button class="action-btn" @click="handleShare">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" fill="#666"/>
              </svg>
              分享
            </button>
            <button class="action-btn" @click="handleFavorite">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" :class="{ 'fill-favorite': isFavorite }">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ isFavorite ? '已收藏' : '收藏' }}
            </button>
          </div>
        </div>

        <div class="post-content">
          <h1 class="post-title">{{ post.title }}</h1>
          <div class="post-tags">
            <span v-for="tag in post.tags" :key="tag" class="post-tag">{{ tag }}</span>
          </div>
          <div class="post-body">
            <p>{{ post.content }}</p>
            <div v-if="post.images && post.images.length > 0" class="post-images">
              <img v-for="(image, index) in post.images" :key="index" :src="image" alt="帖子图片" class="post-image">
            </div>
          </div>
          <div class="post-stats">
            <span class="stat-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#666"/>
              </svg>
              {{ post.views }} 浏览
            </span>
            <span class="stat-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ post.replies }} 回复
            </span>
            <span class="stat-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="m22 4-1.09 1.09L20 6l1.09 1.09L22 8l1.09-1.09L24 6l-1.09-1.09L22 4z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ post.likes }} 点赞
            </span>
          </div>
        </div>
      </div>

      <!-- 回答列表 -->
      <div class="answers-section">
        <div class="section-header">
          <h2>{{ answers.length }} 个回答</h2>
        </div>
        
        <div class="answers-list">
          <div 
            v-for="answer in answers" 
            :key="answer.id"
            class="answer-card"
          >
            <div class="answer-header">
              <div class="answer-author-info">
                <img :src="answer.avatar" alt="回答者头像" class="answer-author-avatar">
                <div class="author-details">
                  <h4 class="answer-author-name">{{ answer.author }}</h4>
                  <span class="answer-time">{{ answer.time }}</span>
                  <span v-if="answer.isBest" class="best-answer-badge">最佳回答</span>
                </div>
              </div>
              <div class="answer-actions">
                <button class="action-btn" @click="likeAnswer(answer.id)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" :class="{ 'fill-liked': answer.isLiked }">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  {{ answer.likes }}
                </button>
              </div>
            </div>
            <div class="answer-content">
              <p>{{ answer.content }}</p>
              <div v-if="answer.images && answer.images.length > 0" class="answer-images">
                <img v-for="(image, index) in answer.images" :key="index" :src="image" alt="回答图片" class="answer-image">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论区 -->
      <div class="comments-section">
        <div class="section-header">
          <h2>{{ comments.length }} 条评论</h2>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-section">
          <img src="https://picsum.photos/200/200?random=user" alt="用户头像" class="comment-input-avatar">
          <div class="comment-input-container">
            <textarea 
              v-model="newComment" 
              placeholder="写下你的评论..." 
              class="comment-textarea"
              rows="3"
            ></textarea>
            <div class="comment-input-actions">
              <button class="submit-comment-btn" @click="submitComment">发布评论</button>
            </div>
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
          <div 
            v-for="comment in comments" 
            :key="comment.id"
            class="comment-card"
          >
            <img :src="comment.avatar" alt="评论者头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-actions">
                <button class="comment-action-btn" @click="likeComment(comment.id)">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" :class="{ 'fill-liked': comment.isLiked }">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="m22 4-1.09 1.09L20 6l1.09 1.09L22 8l1.09-1.09L24 6l-1.09-1.09L22 4z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  {{ comment.likes }}
                </button>
                <button class="comment-action-btn" @click="replyToComment(comment.id)">回复</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div class="related-posts-section">
        <div class="section-header">
          <h2>相关推荐</h2>
        </div>
        
        <div class="related-posts-grid">
          <div 
            v-for="relatedPost in relatedPosts" 
            :key="relatedPost.id"
            class="related-post-card"
            @click="goToPost(relatedPost.id)"
          >
            <h4 class="related-post-title">{{ relatedPost.title }}</h4>
            <div class="related-post-meta">
              <span class="related-post-author">{{ relatedPost.author }}</span>
              <span class="related-post-views">{{ relatedPost.views }} 浏览</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const { postId } = route.params
const { category } = route.query

// 论坛分类数据
const forumCategories = [
  { id: 'pets', name: '宠物' },
  { id: 'beauty', name: '美妆' },
  { id: 'knowledge', name: '知识' },
  { id: 'electronics', name: '电子产品' },
  { id: 'education', name: '教育' },
  { id: 'health', name: '健康医疗' },
  { id: 'finance', name: '金融理财' },
  { id: 'travel', name: '旅游' }
]

// 获取分类名称
const getCategoryName = (categoryId) => {
  const cat = forumCategories.find(c => c.id === categoryId)
  return cat ? cat.name : '未知分类'
}

// 帖子数据
const post = ref({
  id: postId,
  category: category || 'pets',
  title: '如何训练狗狗定点大小便？',
  content: '家里的狗狗总是随地大小便，已经尝试了一些方法但效果不佳。想请教一下各位有经验的铲屎官，有没有什么有效的训练方法？最好能分享一下具体的步骤和注意事项，谢谢！',
  author: '爱宠人士',
  avatar: 'https://picsum.photos/200/200?random=1',
  time: '2小时前',
  views: 789,
  replies: 123,
  likes: 56,
  tags: ['狗狗训练', '新手教程', '行为纠正'],
  images: ['https://picsum.photos/800/600?random=100']
})

// 回答数据
const answers = ref([
  {
    id: 'a1',
    content: '我家狗狗刚来时也有这个问题，后来用了以下方法训练成功了：\n1. 首先观察狗狗的排便规律，一般在饭后15-30分钟会想排便\n2. 在这个时间段带它到指定地点（比如阳台）\n3. 如果它在正确的地方排便，立即给予奖励（零食+表扬）\n4. 如果它在错误的地方排便，不要打骂，只需用报纸擦干，然后把报纸放到指定地点，让它闻气味\n5. 坚持一段时间，狗狗就会养成习惯了\n最重要的是要有耐心，不要急于求成。',
    author: '资深铲屎官',
    avatar: 'https://picsum.photos/200/200?random=2',
    time: '1小时前',
    likes: 128,
    isLiked: false,
    isBest: true,
    images: []
  },
  {
    id: 'a2',
    content: '补充一点，狗狗的记忆力很好，如果它在某个地方排便过一次，下次很可能还会去那里。所以如果发现它在错误的地方排便，一定要彻底清洁，最好用专门的宠物除味剂，去除气味。\n另外，幼犬的膀胱比较小，需要更频繁地带它出去，一般每2-3小时一次。',
    author: '宠物训练师',
    avatar: 'https://picsum.photos/200/200?random=3',
    time: '45分钟前',
    likes: 89,
    isLiked: false,
    isBest: false,
    images: []
  },
  {
    id: 'a3',
    content: '我推荐使用狗狗厕所配合引导剂，效果不错。先把狗狗厕所放在你希望它排便的地方，然后在上面喷洒引导剂，吸引狗狗过去。刚开始可能需要一些耐心，但坚持一周左右就能看到效果了。',
    author: '狗主人小王',
    avatar: 'https://picsum.photos/200/200?random=4',
    time: '30分钟前',
    likes: 45,
    isLiked: false,
    isBest: false,
    images: ['https://picsum.photos/800/600?random=101']
  }
])

// 评论数据
const comments = ref([
  {
    id: 'c1',
    content: '感谢分享！我家狗狗也是用类似的方法训练成功的，确实需要耐心。',
    author: '养狗新手',
    avatar: 'https://picsum.photos/200/200?random=5',
    time: '50分钟前',
    likes: 12,
    isLiked: false
  },
  {
    id: 'c2',
    content: '除了奖励之外，定时定量喂食也很重要，可以帮助狗狗建立规律的排便习惯。',
    author: '宠物营养师',
    avatar: 'https://picsum.photos/200/200?random=6',
    time: '40分钟前',
    likes: 8,
    isLiked: false
  }
])

// 相关推荐
const relatedPosts = ref([
  {
    id: '102',
    title: '猫咪掉毛严重怎么办？',
    author: '猫咪铲屎官',
    views: 654
  },
  {
    id: '103',
    title: '养宠物需要准备哪些物品？',
    author: '新手铲屎官',
    views: 521
  },
  {
    id: '104',
    title: '狗狗常见疾病预防指南',
    author: '宠物医生',
    views: 890
  }
])

// 新评论
const newComment = ref('')
// 是否收藏
const isFavorite = ref(false)

// 点赞回答
const likeAnswer = (answerId) => {
  const answer = answers.value.find(a => a.id === answerId)
  if (answer) {
    if (answer.isLiked) {
      answer.likes--
    } else {
      answer.likes++
    }
    answer.isLiked = !answer.isLiked
  }
}

// 点赞评论
const likeComment = (commentId) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    if (comment.isLiked) {
      comment.likes--
    } else {
      comment.likes++
    }
    comment.isLiked = !comment.isLiked
  }
}

// 提交评论
const submitComment = () => {
  if (newComment.value.trim()) {
    const newCommentObj = {
      id: `c${comments.value.length + 1}`,
      content: newComment.value.trim(),
      author: '当前用户',
      avatar: 'https://picsum.photos/200/200?random=user',
      time: '刚刚',
      likes: 0,
      isLiked: false
    }
    comments.value.unshift(newCommentObj)
    newComment.value = ''
  }
}

// 回复评论
const replyToComment = (commentId) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    newComment.value = `回复 @${comment.author}：`
    // 自动滚动到评论输入框
    setTimeout(() => {
      const textarea = document.querySelector('.comment-textarea')
      if (textarea) {
        textarea.focus()
        textarea.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    }, 100)
  }
}

// 收藏帖子
const handleFavorite = () => {
  isFavorite.value = !isFavorite.value
}

// 分享帖子
const handleShare = () => {
  alert('分享功能暂未实现，敬请期待！')
}

// 跳转到其他帖子
const goToPost = (relatedPostId) => {
  router.push(`/post/${relatedPostId}?category=${post.value.category}`)
}

// 页面加载时初始化
onMounted(() => {
  // 可以添加从本地存储或API加载数据的逻辑
})
</script>

<style scoped>
/* 帖子详情容器 */
.post-detail-container {
  flex: 1;
  padding: 20px;
  min-height: 100vh;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-item:hover {
  color: #e67e22;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #e67e22;
  font-weight: 500;
}

.breadcrumb-separator {
  color: #999;
}

/* 主内容区域 */
.post-detail-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 各部分通用样式 */
.post-detail-section,
.answers-section,
.comments-section,
.related-posts-section {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 帖子头部 */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.post-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.post-time {
  font-size: 14px;
  color: #999;
}

.post-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #e67e22;
  color: white;
}

/* 帖子内容 */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-tag {
  background-color: #e67e22;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.post-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.post-stats {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

/* 回答列表 */
.answers-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 回答卡片 */
.answer-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #e0e0e0;
  transition: all 0.2s;
}

.answer-card:hover {
  background-color: #f0f0f0;
  transform: translateX(4px);
}

.answer-card:nth-child(1) {
  border-left-color: #e67e22;
  background-color: #fff8e1;
}

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.answer-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.answer-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.answer-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.answer-time {
  font-size: 13px;
  color: #999;
  margin-right: 12px;
}

.best-answer-badge {
  background-color: #e67e22;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.answer-actions {
  display: flex;
  gap: 8px;
}

.answer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.answer-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.answer-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* 评论区 */
.comment-input-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.comment-input-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.comment-textarea:focus {
  outline: none;
  border-color: #e67e22;
}

.comment-input-actions {
  display: flex;
  justify-content: flex-end;
}

.submit-comment-btn {
  background-color: #e67e22;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.submit-comment-btn:hover {
  background-color: #d35400;
}

/* 评论列表 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 评论卡片 */
.comment-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-author {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.comment-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.comment-action-btn:hover {
  color: #e67e22;
}

/* 相关推荐 */
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.related-post-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.related-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #e67e22;
}

.related-post-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
}

/* 图标填充样式 */
.fill-liked,
.fill-favorite {
  fill: #e67e22;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .post-detail-container {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .post-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .post-title {
    font-size: 24px;
  }
  
  .answer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .answer-actions {
    align-self: flex-end;
  }
  
  .comment-input-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .post-detail-container {
    padding: 12px;
  }
  
  .post-detail-section,
  .answers-section,
  .comments-section,
  .related-posts-section {
    padding: 16px;
  }
  
  .section-header h2 {
    font-size: 20px;
  }
  
  .post-title {
    font-size: 20px;
  }
}
</style>